<template>
  <div class="chat-layout">
    <!-- 左侧对话列表 -->
    <div class="chat-list">
      <h3>对话列表</h3>
      <ul>
        <li
            v-for="(session, index) in sessions"
            :key="session.id"
            :class="{ active: selectedSession && selectedSession.id === session.id }"
            @click="loadSessionMessages(session.id)"
        >
          对话 {{ index + 1 }}
        </li>
      </ul>
    </div>

    <!-- 右侧聊天窗口 -->
    <div class="chat-container">
      <div class="messages">
        <div
            v-for="(message, index) in messages"
            :key="index"
            :class="{'user-message': message.sender === 'user', 'bot-message': message.sender === 'bot'}"
        >
          <img :src="message.sender === 'user' ? userAvatar : botAvatar" class="avatar" />
          <div class="message-content">
            <span class="message-text">{{ message.text }}</span>
            <span class="message-time">{{ formatTime(message.createdAt) }}</span>
          </div>
        </div>
      </div>

      <div class="input-container">
        <input
            v-model="userInput"
            placeholder="输入您的问题..."
            @keyup.enter="sendMessage"
            class="input-box"
        />
        <button @click="sendMessage" class="send-button">发送</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      userInput: '',
      messages: [],
      sessions: [], // 对话列表
      selectedSession: {
        id: '1'
      }, // 当前选中的对话
      botAvatar: 'https://via.placeholder.com/50x50.png?text=Bot',
      userAvatar: 'https://via.placeholder.com/50x50.png?text=User',
    };
  },
  mounted() {
    // 加载对话列表
    this.loadSessions();
  },
  methods: {
    async sendMessage() {
      // if (!this.userInput.trim() || !this.selectedSession) return;

      this.messages.push({
        sender: 'user',
        text: this.userInput,
        createdAt: new Date(),
      });

      try {
        const response = await axios.post(`http://localhost:9090/api/chat/${this.selectedSession.id}`, { text: this.userInput });

        // 添加AI回复到对话框
        this.messages.push({
          sender: 'bot',
          text: response.data, // 大模型的回复
          createdAt: new Date(),
        });
      } catch (error) {
        console.error('Error communicating with AI:', error);
      } finally {
        this.userInput = ''; // 清空输入框
      }
    },
    async loadSessions() {
      try {
        const response = await axios.get('http://localhost:9090/api/chat/sessions');
        this.sessions = response.data;
      } catch (error) {
        console.error('Error loading sessions:', error);
      }
    },

    async loadSessionMessages(sessionId) {
      try {
        const response = await axios.get(`http://localhost:9090/api/chat/sessions/${sessionId}`);
        this.messages = response.data;
        this.selectedSession = this.sessions.find((session) => session.id === sessionId);
      } catch (error) {
        console.error('Error loading session messages:', error);
      }
    },

    formatTime(dateTime) {
      const date = new Date(dateTime);
      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    },
  },
};
</script>

<style scoped>
.chat-layout {
  display: flex;
  height: 95%;
  background-color: #f9f9f9;
}

.chat-list {
  width: 25%;
  background-color: #fff;
  border-right: 1px solid #ddd;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chat-list h3 {
  margin-bottom: 20px;
  font-size: 18px;
  color: #333;
}

.chat-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.chat-list li {
  padding: 10px 15px;
  margin-bottom: 10px;
  background-color: #f1f1f1;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.2s ease;
}

.chat-list li:hover,
.chat-list li.active {
  background-color: #42b983;
  color: white;
}

.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-message {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}

.bot-message {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 15px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.message-content {
  max-width: 60%;
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
  border-radius: 10px;
  padding: 10px;
}

.user-message .message-content {
  background-color: #e0f7fa;
}

.message-text {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.message-time {
  font-size: 12px;
  color: #999;
  text-align: right;
  margin-top: 5px;
}

.input-container {
  display: flex;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.input-box {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-right: 10px;
}

.send-button {
  padding: 10px 20px;
  background-color: #42b983;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.send-button:hover {
  background-color: #369f6d;
}
</style>
